<template>
  <div class="create-folder-button-content">
    <el-button
      v-if="roundFlag"
      type="primary"
      :size="size"
      round
      plain
      @click.stop="setCreateFolderDialogVisible(true)"
    >
      新建文件夹<i class="el-icon-folder-add el-icon--right" />
    </el-button>
    <el-button
      v-if="circleFlag"
      type="success"
      :size="size"
      circle
      @click.stop="setCreateFolderDialogVisible(true)"
    >
      <i class="el-icon-folder-add" />
    </el-button>
    <a
      href="javascript:;"
      v-if="liFlag"
      @click.stop="setCreateFolderDialogVisible(true)"
    >
      <i class="el-icon-folder-add"></i>新建文件夹
    </a>
    <el-dialog
      v-if="!liFlag"
      title="新建文件夹"
      :visible="createFolderDialogVisible"
      width="30%"
      @opened="focusInput('folderName')"
      @closed="resetForm('createFolderForm')"
      :append-to-body="true"
      :modal-append-to-body="false"
      :before-close="handleClose"
      :center="false"
    >
      <div>
        <div class="icon" style="display: flex; justify-content: center">
          <svg
            slot="placeholder"
            class="svgicon"
            aria-hidden="true"
            style="width: 120px"
          >
            <use :xlink:href="'#icon-morenwenjianjia'"></use>
          </svg>
        </div>
        <el-form
          label-width="0"
          :rules="createFolderRules"
          ref="createFolderForm"
          :model="createFolderForm"
          status-icon
          @submit.native.prevent
        >
          <el-form-item label="" prop="folderName">
            <el-input
              type="text"
              ref="folderName"
              @keyup.enter.native="doCreateFolder"
              v-model="createFolderForm.folderName"
              autocomplete="off"
              placeholder="请输入文件夹名称"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setCreateFolderDialogVisible(false)"
          >取 消</el-button
        >
        <el-button type="primary" @click="doCreateFolder" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import fileService from '../../../api/file'
import { mapActions, mapGetters, mapMutations } from 'vuex'

export default {
  name: 'CreateFolder',
  components: {},
  props: {
    roundFlag: Boolean,
    circleFlag: Boolean,
    liFlag: Boolean,
    size: String,
  },
  data() {
    return {
      createFolderRules: {
        folderName: [
          { required: true, message: '请输入文件夹名称', trigger: 'blur' },
        ],
      },
      createFolderForm: {
        folderName: '',
      },
      loading: false,
    }
  },
  methods: {
    ...mapMutations({
      setCreateFolderDialogVisible: 'file/setCreateFolderDialogVisible',
    }),
    ...mapActions({
      reloadFileList: 'file/loadFileList',
    }),
    focusInput(refName) {
      this.$refs[refName].focus()
    },
    resetForm(refName) {
      this.$refs[refName].resetFields()
    },
    handleClose() {
      this.setCreateFolderDialogVisible(false)
      this.resetForm('createFolderForm')
    },
    doCreateFolder() {
      let _this = this
      _this.$refs.createFolderForm.validate((valid) => {
        if (valid) {
          _this.loading = true
          fileService.createFolder(
            {
              parentId: _this.parentId,
              folderName: _this.createFolderForm.folderName,
            },
            (res) => {
              _this.loading = false
              _this.setCreateFolderDialogVisible(false)
              _this.$message.success('新建成功')
              _this.reloadFileList()
              if (_this.$parent.contextMenuVisible) {
                _this.$parent.contextMenuVisible = false
              }
            },
            (res) => {
              _this.$message.error(res.message)
              _this.loading = false
            }
          )
        }
      })
    },
  },
  computed: {
    ...mapGetters(['parentId', 'createFolderDialogVisible']),
  },
  mounted() {},
  watch: {},
}
</script>

<style>
.create-folder-button-content {
  display: inline-block;
  margin-right: 10px;
}
</style>
